<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

      $(function (){

          var username = $("#username");

          username.on("input",function (){
              var length = username.val().length;

              if(length<5){
                  $("#message")
                      .html("通过")
                      .css("color","green")
              }else{
                  $("#message")
                      .html("too long")
                      .css("color","red")
              }
          })

          username.blur(function (){
              var pattern = new RegExp("^\d+$")
              if(pattern.test(username.val())){
                  $("#message")
                      .html("格式正确")
                      .css("color","green")
              }else{
                  $("#message")
                      .html("必须有数字")
                      .css("color","red")
              }
          })

          username.one("change",function (){
              alert("我只执行一次");
          })

          $("#removeInput").click(function (){
              username.off("input");
          })

          $("#removeAll").click(function (){
              username.off();
          })

      })


    </script>
</head>
<body>


    用户名：<input type="text" id="username"/><span id="message"></span>
    <br/>


    <input type="button" id="removeInput" value="取消input事件"/>
    <input type="button" id="removeAll" value="取消所有事件"/>

</body>
</html>